<template>
  <div class="details_main flex">
    <div class="flex1 flexC" style="padding: 3rem;">
      <p class="font_s27" style="color: #FBC850;">{{data.mc}}</p>
      <p class="font_s22 colorF" style="padding: 1rem 0;">
        <img class="verticM" style="height: 1.375rem;margin-right: 1rem;" src="../../assets/img/comprehensive/15.png" alt="">
        {{data.dz}}
      </p>
      <div class="name flex font_s22 Medium colorF JustifyContentSA">
        <p class="">负责人：{{data.fzr}}</p>
        <p class="">社会信用代码号：{{data.shxydm}}</p>
        <p class="">开办时间：{{data.ksrq}}</p>
      </div>
      <ul class="flex colorF textC" style="width: 70%;padding-top: 1rem;">
        <li class="flex1" style="border: solid 2px #EF8264;border-radius:3px;background:rgba(239,130,100,0.5);margin-right:0.5rem;">
          <!-- <p class="font_s40" style="line-height: 4rem;">A</p> -->
          <p class="font_s40" style="line-height: 4rem;">{{data.xydj}}</p>
          <p class="font_s16" style="line-height: 2rem;">信用等级</p>
        </li>
        <li class="flex1" style="border: solid 2px #7D649E;border-radius:3px;background:rgba(125,100,158,0.5);margin-right:0.5rem;">
          <p class="font_s40" style="line-height: 4rem;">{{data.xyf}}</p>
          <p class="font_s16">信用分</p>
        </li>
        <li class="flex1" style="border: solid 2px #94E7B7;border-radius:3px;background:rgba(148,231,183,0.5);margin-right:0.5rem;">
          <p class="font_s40" style="line-height: 4rem;">{{data.fxdj}}</p>
          <p class="font_s16">风险等级</p>
        </li>
        <li class="flex1" style="border: solid 2px #FFCD79;border-radius:3px;background:rgba(255,205,121,0.5);">
          <p class="font_s40" style="line-height: 4rem;">{{data.jgdj}}级</p>
          <p class="font_s16">机构等级</p>
        </li>
      </ul>
      <div class="flex1 flexC JustifyContentC" style="border-top:dashed 1px rgba(247,199,83,0.5);margin-top: 2rem;">
        <ul class="flex textC">
          <li class="flex1 content flexC AlignItemsC JustifyContentC">
            <p class="font_s22 colorF Medium">占地面积总数（亩）</p>
            <p class="Regular font_s60" style="color: #fdf1ad;">{{data.zdmj}}</p>
          </li>
         <li class="flex1 content flexC AlignItemsC JustifyContentC">
           <p class="font_s22 colorF Medium">剩余可造墓土地面积（亩）</p>
           <p class="Regular font_s60" style="color: #fdf1ad;">{{data.sykzmj}}</p>
         </li>
          <li class="flex1 content flexC AlignItemsC JustifyContentC">
            <p class="font_s22 colorF Medium">从业人员总数（人）</p>
            <p class="Regular font_s60" style="color: #fdf1ad;">{{data.cyry}}</p>
          </li>
          <li class="flex1 content flexC AlignItemsC JustifyContentC">
            <p class="font_s22 colorF Medium">最大承载力（人）</p>
            <p class="Regular font_s60" style="color: #fdf1ad;">{{data.zdczl}}</p>
          </li>
          <li class="flex1 content flexC AlignItemsC JustifyContentC">
            <p class="font_s22 colorF Medium">销售墓穴总数（穴）</p>
            <p class="Regular font_s60" style="color: #fdf1ad;">{{data.xssymxzs}}</p>
          </li>

          <li class="flex1 content flexC AlignItemsC JustifyContentC">
            <p class="font_s22 colorF Medium">具有本科以上学历的从业人员总数（人）</p>
            <p class="Regular font_s60" style="color: #fdf1ad;">29</p>
          </li>
        </ul>
        <ul class="flex textC">

         <li class="flex1 content flexC AlignItemsC JustifyContentC">
           <p class="font_s22 colorF Medium">节地墓穴销售总数（穴）</p>
           <p class="Regular font_s60" style="color: #fdf1ad;">{{data.xsjdmxzs}}</p>
         </li>
          <li class="flex1 content flexC AlignItemsC JustifyContentC">
            <p class="font_s22 colorF Medium">落葬墓穴总数（穴）</p>
            <p class="Regular font_s60" style="color: #fdf1ad;">{{data.lzsymxzs}}</p>
          </li>
          <li class="flex1 content flexC AlignItemsC JustifyContentC">
            <p class="font_s22 colorF Medium">落葬节地墓穴总数（穴）</p>
            <p class="Regular font_s60" style="color: #fdf1ad;">{{data.lzjdmxzs}}</p>
          </li>
          <li class="flex1 content flexC AlignItemsC JustifyContentC">
            <p class="font_s22 colorF Medium">寄存格位存放总数（穴）</p>
            <p class="Regular font_s60" style="color: #fdf1ad;">{{data.jcgwcfzs}}</p>
          </li>
          <li class="flex1 content flexC AlignItemsC JustifyContentC">
            <p class="font_s22 colorF Medium">办理节地葬补贴总数（人）</p>
            <p class="Regular font_s60" style="color: #fdf1ad;">{{data.bljdbtrs}}</p>
          </li>
          <li class="flex1 content flexC AlignItemsC JustifyContentC">
            <p class="font_s22 colorF Medium">具有墓地管理员资质的从业人员数量（人）</p>
            <p class="Regular font_s60" style="color: #fdf1ad;">12</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Details',
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.details_main{
  width: 100%;
  height: 100%;
  .name{
    line-height: 3.875rem;
    background:rgba(30,38,48,0.9);
    border: dashed 1px #666;
  }
  .content{
    margin: 0.5rem;
    padding: 0.65rem;

    background: url(../../assets/img/topcommon/06.png) no-repeat;
    background-size: 100% 100%;
    p:nth-child(1){
      line-height: 2rem;
    }
  }
}
</style>
